<extend name="Include:Layout"/>
<block name="title">我的</block>
<block name="style">
<style>

</style>
</block>

<block name="main">
	<div class="weui_tab">
		<div class="weui_tab_bd container" id="container">
			<div class="person-hd">
				<div class="user-info">
					<img src="/Public/Static/Img/avater1.png" class="avater">
					<h4>用户名</h4>
					<p style="font-size:12px;">阳光灿烂会员，已关注</p>
				</div>
			</div>
			<div class="person-bd">
				<div class="weui-row">
				  	<div class="weui-col-33 myjifen-link">
				  		<p>积分</p>
				  		<p>0</p>
				  	</div>
				  	<div class="weui-col-33" style="border-left:1px solid #ddd;border-right:1px solid #ddd;">
				  		<p>奖励卡</p>
				  		<p>0</p>
				  	</div>
				  	<div class="weui-col-33 myxiaofei-link">
				  		<p>缴费</p>
				  		<p>记录</p>
				  	</div>
				</div>
				<div class="weui_cells" style="font-size:14px;color:#888;margin-top:0;">
				  	<div class="weui_cell mycard-link">
				    	<div class="weui_cell_bd weui_cell_primary">
				      		<p><a href="tel:15858178714" class="tel-link">158-5817-8714</a></p>
				      		<p>
				      			点击查看会员卡，累计积分
				      		</p>
				    	</div>
				    	<div class="weui_cell_ft">
				    	  	<i class="icon iconfont" style="color:#333;font-size:26px;"></i>
				    	</div>
				  	</div>
				</div>
				
				<div class="weui_cells weui_cells_access">
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_hd">
							<i class="icon iconfont" style="color:#64cf8f"></i>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
						  	<p>已绑定手机</p>
						</div>
						<div class="weui_cell_ft"></div>
					</a>
					
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_hd">
							<i class="icon iconfont" style="color: #ecc099;"></i>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
						  	<p>您的特权</p>
						</div>
						<div class="weui_cell_ft"></div>
					</a>
					
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_hd">
							<i class="icon iconfont" style="color: #90aedb;"></i>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
						  	<p>个人资料</p>
						</div>
						<div class="weui_cell_ft"></div>
					</a>
					
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_hd">
							<i class="icon iconfont" style="color: #90ae23;"></i>
						</div>
						<div class="weui_cell_bd weui_cell_primary">
						  	<p>投诉建议</p>
						</div>
						<div class="weui_cell_ft"></div>
					</a>
				</div>
				
			</div>
	    </div>
		
		<php>$curbar = 4;</php>
    	<include file="Include:navbar" />
    </div>


<div id="page_container" class="weui-popup-container popup-bottom"  style="background:#fff;">
  	<div class="weui-popup-modal" style="height:100%;">
  		<div class="weui_tab">
	      	<div class="weui_tab_bd" id="content">
				<div id="content_detail"></div>
				<div class="weui-infinite-scroll">
					<div class="infinite-preloader"></div>
				</div>
	      	</div>
	      	<div class="weui_tabbar">
				<a href="javascript:;" class="weui_tabbar_item close-popup ">
					<p class="weui_tabbar_label" style="font-size:18px;line-height:49px;">返回</p>
				</a>
	      	</div>
	    </div>
  	</div>
</div>

<script type="text/html" id="myjifen">
	<div style="background:#64cf8f;padding:20px 10px;color:#fff;">
		<p style="line-height:30px;">我的剩余积分</p>
		<p>
			<b style="font-size:50px;">0</b>
		</p>
	</div>
	<div style="padding:0 10px;" class="article">
		<h3 style="line-height:40px;">积分说明：</h3>
		<p>这边介绍积分是干嘛的</p>
		<p>这边介绍积分是干嘛的</p>
		<p>这边介绍积分是干嘛的</p>
		<p>这边介绍积分是干嘛的</p>
	</div>
</script>

<script type="text/html" id="myxiaofei">
	<div style="height:10px;"></div>
	{{each data as value i}}
	<div class="weui_media_box weui_media_text" style="background:#fff;margin-bottom:10px;">
      	<h4 class="weui_media_title">订单号：{{value.id}}</h4>
      	<p class="weui_media_desc">
      		消费时间：{{value.time}}<br>
      		消费金额：{{value.cost}}<br>
    		{{value.desc}}
      	</p>
    </div>
    {{/each}}
    
</script>

<script type="text/html" id="mycard">
	<div style="background:#fff;margin:10px;border-radius: 5px;">
		<div class="weui-row weui-no-gutter" style="margin-bottom:10px;">
	      	<div class="weui-col-33" style="text-align:right"><img src="/Public/Static/Img/avater1.png" class="avater"></div>
	      	<div class="weui-col-66">
	      		<h2 style="margin-left:10px;margin-top:20px;">会员名</h2>
	      		<p style="margin-left:15px;font-size:14px;color:#777;">阳关灿烂会员，已关注</p>
	      	</div>
	    </div>
		<div id="bcTarget" style="margin:0 auto;text-align:center"></div>
		<p style="text-align:center;font-size:14px;color:#777;line-height:40px;padding-bottom:20px;">会员卡号：<a href="javascript:;" class="tel-link">158-5817-8714</a></p>
	</div>
</script>    
</block>

<block name="script">
<js href="/Public/Static/Js/jquery-barcode.min.js" />
<script>
$(function () {
	
	$('.weui_tabbar_item').click(function(){
		var $this = $(this);
		if(!$this.hasClass('weui_bar_item_on')){
			$('.weui_bar_item_on').removeClass('weui_bar_item_on');
			$this.addClass('weui_bar_item_on');
		}
	});
	
	//我的会员卡
    $('.mycard-link').click(function(){
    	var $this = $(this);
		$.showLoading("正在加载...");
		$('#content').html('');
		var html = template("mycard",{});
		$('#content').html(html);
		//加载条形码
		$("#bcTarget").barcode("1234567890128", "ean13",{barWidth:2, barHeight:60,showHRI:false});     
		$.hideLoading();
		$("#page_container").popup();
    });
    
    //我的积分
    $('.myjifen-link').click(function(){
    	var $this = $(this);
		$.showLoading("正在加载...");
		$('#content').html('');
		var html = template("myjifen",{});
		$('#content').html(html);
		$.hideLoading();
		$("#page_container").popup();
    });
    
    //缴费记录
    $('.myxiaofei-link').click(function(){
    	var $this = $(this);
		$.showLoading("正在加载...");
		$('#content_detail').html('');
		$.get('/home/home/get_xiaofei',function(ret){
			if(ret.status){
				var html = template("myxiaofei",ret);
				$('#content_detail').html(html);
				$.hideLoading();
				$('#content').infinite();
				$("#page_container").popup();
				
				var loading = false;  //状态标记
				$('#content').infinite().on("infinite", function() {
				  	if(loading) return;
				  	loading = true;
				  	$.get('/home/home/get_xiaofei',function(ret){
				  		var html = template("myxiaofei",ret);
				  		$('#content_detail').append(html);
				  		loading = false;
				  	});
				});
			}else{
				$.alert(ret.info);
			}
		});
		
    });
});
</script>
</block>